<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加几个场景对象</title>
    <script src="js/three73.js"></script>
    <style>
        body{
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div id="WebGL-output"></div>

    <script>
        window.onload = function(){
            var scene = new THREE.Scene();  //定义场景

            var camera = new THREE.PerspectiveCamera(45,window.innerWidth/window.innerHeight,0.1,1000); //定义相机

            //定义渲染器，renderer对象负责计算指定相机角度下浏览器中scene的样子
            //在这个示例里我们创建了一个WebGLRenderer对象，使用计算机上的显卡来渲染场景
            //除了基于WebGL的渲染器，还有基于画板的渲染器，基于svg的渲染器
            var renderer = new THREE.WebGLRenderer();
            renderer.setClearColor(0xEEEEEE);
            renderer.setSize(window.innerWidth,window.innerHeight);

            //创建一个坐标轴对象并添加到场景中
            var axex = new THREE.AxisHelper(20);
            scene.add(axex);

            //创建一个平面
            var planeGeometry = new THREE.PlaneGeometry(60,20,1,1);   //宽60，高20
            var planeMaterial = new THREE.MeshBasicMaterial({color:0xcccccc});  //材质颜色
            var plane = new THREE.Mesh(planeGeometry,planeMaterial);   //合并在一个名叫plane的网格对象中

            //定义平面的位置
            plane.rotation.x = -0.5*Math.PI;

            plane.position.x = 15;
            plane.position.y = 0;
            plane.position.z = 0;

            scene.add(plane);

            //创建一个方块，要把wireframe（线框）属性设为true，球体同
            var cubeGeometry = new THREE.CubeGeometry(4,4,4);
            var cubeMaterial = new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true});
            var cube = new THREE.Mesh(cubeGeometry,cubeMaterial);

            cube.position.x = -4;
            cube.position.y = 3;
            cube.position.z = 0;

            scene.add(cube);

            //创建一个球体
            var sphereGeometry = new THREE.SphereGeometry(4,20,20);
            var sphereMaterial = new THREE.MeshBasicMaterial({color:0x7777ff,wireframe:true});
            var sphere = new THREE.Mesh(sphereGeometry,sphereMaterial);

            sphere.position.x = 20;
            sphere.position.y = 4;
            sphere.position.z = 2;

            scene.add(sphere);

            camera.position.x = -30;
            camera.position.y = 40;
            camera.position.z = 30;
            camera.lookAt(scene.position);  //指向场景的中心

            //输出到页面
            document.getElementById('WebGL-output').appendChild(renderer.domElement);
            renderer.render(scene,camera);

        }
    </script>
</body>
</html>